<template>
    <div class="box" ref="charLine"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
let charLine = ref()
let myChart
onMounted(() => {
    console.log(charLine.value);
    myChart = echarts.init(charLine.value)
    myChart.setOption(option())
    console.log(props);

})
const option = () => {
    return {
        title: {
            // text:'折线图'
        },
        xAxis: {
            // x轴均分
            type: 'category',
            // 坐标两侧不留白
            boundaryGap: false,
            // 隐藏x轴
            show: false
        },
        yAxis: {
            // 隐藏y轴
            show: false,
        },
        series:
        {
            data: props.data,
            type: 'line',
            // 平滑曲线
            smooth: true,
            // 拐点形状
            label: {
                show: false
            },
            // 拐点样式
            itemStyle: {
                // color:'white'
                // 透明度
                opacity: 0
            },
            // 填充区颜色
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'white' // 0% 处的颜色
                        },
                        {
                            offset: 1, color: 'white' // 100% 处的颜色
                        }
                    ],
                    // 缺省为false
                    global: false
                }
            },
            // 线条颜色
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'yellow' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            // 调整图标的布局
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            show: true,
            //图标底层的颜色
            backgroundColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "aqua", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "white", // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
        },
        //提示插件
        tooltip: {
            trigger: 'axis',
            //限制展示区域，在容器内部
            confine: true
        }
    }
}
let props = defineProps(['data'])
watch(() => props.data, () => {
    console.log(props.data);
    myChart.setOption(option())
})
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ccc;
}
</style>